<template>
  <view class="shops-detail" v-cloak>
    <image src="@/static/back-icon.png" mode="aspectFill" class="base-back" @click="handleBack()"></image>
    <swiper class="detail-ad" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="item in info.imageList" :key="item">
        <image class="item-img" :src="getMedia(item)" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <view class="detail-main">
      <view class="main-header">
        <view class="header-store">
          <image :src="info.logo" mode="aspectFill" class="store-img"></image>
          <view class="store-info">
            <h2>{{info.name}}</h2>
            <view class="box-flex">
              <uni-rate :value="info.score*1" size="14"></uni-rate> <span style="margin-left: 20rpx;">{{info.score}}条</span>
            </view>
            <view class="info-list"v-if="false">
              <view class="list-item">效果:4.9</view>
              <view class="list-item">服务:4.9</view>
              <view class="list-item">环境:4.9</view>
            </view>
            <view class="info-tags" v-if="false">
              <view class="tags-item">医保定点</view>
            </view>
          </view>
        </view>
        <view class="header-time">
          <view class="time-card">
            <view class="time-title"><span style="font-weight: bold;">{{info.businessStatus?'营业中':'休息中'}}</span>  <span style="font-size: 20rpx;color: #efefef;margin: 0 8rpx;">|</span>  周一至周日 {{info.timeSlotReq.startTime}}-{{info.timeSlotReq.endTime}} <uni-icons style="margin-left: 12rpx;" type="right" size="12" color="#b0b0b0"></uni-icons> </view>
            <view class="time-tags">
              <view class="tags-item">{{doctorList.length}}名认证医师</view>
              <view class="tags-item">洗牙</view>
            </view>
          </view>
          <view class="time-handle" @click="handleTalk()">
            <image src="@/static/tell-green.png" mode="aspectFill" class="img"></image>
            电话
          </view>
        </view>
        <view class="header-address" @click="handleOpenLocation()">
          <view class="box-flex"><span class="dot">{{info.address}}</span> <uni-icons type="right" size="12" color="#b0b0b0"></uni-icons> </view>
          <view class="address-p"><image src="@/static/position-gray.png" />{{info.address}}</view>
        </view>
      </view>
      
      <view class="main-tabs not-bar">
        <view class="tabs-item" :class="curTabs == idx?'active':''" v-for="(item,idx) in tabsList" :key="idx" @click="curTabs = idx">{{item}}</view>
      </view>
      
      <view class="main-goods">
        <view class="goods-list">
          <view class="list-item" @click="handleToDetail()">
            <image src="@/static/gray.jpg" mode="aspectFill" class="item-img"></image>
            <view class="item-main">
              <h2 class="dot2">工作日双人洗牙 | 免费拍片+口腔检查</h2>
              <view class="main-p dot">周一至周五可用 · 不含喷砂 · 含抛光</view>
              <view class="main-footer">
                <view class="footer-price">
                  <view class="price-p"><span style="font-size: 22rpx;">¥</span>19.9 <span class="discount">0.5折</span> <span class="origin">¥496</span></view>
                  <view class="price-span">
                    <span class="span">共省¥496</span>
                  </view>
                </view>
                <view class="footer-handle">
                  <span>已售5000+</span>
                  <view class="button">抢购</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="main-team" v-if="doctorList.length">
        <view class="team-header" @click="handleToUrl('/mainPackage/doctor-list')">
          <h2>医师团队（{{doctorList.length}}）</h2>
          <uni-icons type="right" size="14" color="#B0B0B0"></uni-icons>
        </view>
        <view class="team-list not-bar">
          <view class="list-item" v-for="(item,idx) in doctorList" :key="idx" @click="handleToUrl(`/mainPackage/doctor-detail?id=${item.id}`)">
            <image :src="item.avatar || '../static/doctor-default.png'" mode="aspectFill" class="img"></image>
            <view class="item-info">
              <h3 class="h3">{{item.realName}} <span class="span">{{item.jobTitle}}</span></h3>
              <view class="item-p">从业{{item.workYear}}年</view>
              <view class="item-footer">服务 <span class="theme-color">{{item.serviceNumber}}</span><span style="font-size: 20rpx;margin:0 16rpx">|</span>好评 <span class="theme-color">{{item.goodComment}}</span></view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="main-brand" v-if="false">
        <h2 @click="handleToBrand()">品牌介绍 <uni-icons type="right" size="14" color="#b0b0b0"></uni-icons> </h2>
        <view class="brand-main">
          <image src="@/static/gray.jpg" mode="aspectFill" class="img"></image>
          <view class="main-info">
            <view class="info-title">爱尚大众口腔</view>
            <view class="info-list">
              <view class="list-item"> <uni-icons type="checkbox" size="16" color="#b0b0b0"></uni-icons> 品牌连锁</view>
              <view class="list-item"> <uni-icons type="checkbox" size="16" color="#b0b0b0"></uni-icons> 一站式服务</view>
              <view class="list-item"> <uni-icons type="checkbox" size="16" color="#b0b0b0"></uni-icons> 优质口碑</view>
            </view>
          </view>
        </view>
        <view class="brand-footer">其他55家分店 <uni-icons type="right" size="14" color="#b0b0b0"></uni-icons></view>
      </view>
      
      <view class="main-evaluation" v-if="false">
        <view class="title">评价(230) <uni-icons type="right" size="14" color="#B0B0B0"></uni-icons> </view>
        <SinyuEvaluation></SinyuEvaluation>
      </view>
    </view>
    <view class="detail-footer">
      <view class="footer-item" @click="handleTalk()">
        <image src="@/static/tell-green.png" class="item-img" mode="aspectFill"></image>
        电话
      </view>
<!--      <view class="footer-item">
        <image src="@/static/talk-green.png" class="item-img" mode="aspectFill"></image>
        咨询
      </view> -->
      <view class="footer-button" @click="handleInvitation()">预约到店</view>
    </view>
  </view>
</template>

<script>
  import SinyuEvaluation from '@/components/SinyuEvaluation.vue';
  export default {
    components:{SinyuEvaluation},
    data() {
      return {
        tabsList:['优惠','医师'],
        curTabs:0,
        info:uni.getStorageSync('selectStore'),
        doctorList:[],
        commentList:[]
      };
    },
    onLoad(ops) {
      this.$get(`/merchant/v1/org/${ops.id}`).then(res=>{
        this.info = {...this.info,...res.content}
        this.$get('/merchant/v1/staff',{orgId:ops.id}).then(res=>{
          this.doctorList = res.content
        })
      })
      this._getCommentList()
    },
    methods:{
      handleMoreComment(){
        uni.navigateTo({
          url:`/mainPackage/all-evaluation?topicId=${this.info.id}&appId=yh_mouth_org`
        })
      },
      handleBack(){
        uni.navigateBack({
          fail:e=>{
            uni.reLaunch({
              url:'/pages/index/index'
            })
          }
        })
      },
      handleOpenLocation(){
        uni.openLocation({
          latitude: parseFloat(this.info.latitude),
          longitude: parseFloat(this.info.longitude),
          scale: 18,
          name:this.info.name,
          address:this.info.address,
        })
      },
      handleInvitation(){
        uni.verifyLogin()
        uni.navigateTo({
          url:`/pages/family-doctor/invitation-submit`
        })
      },
      handleTalk(){
        uni.makePhoneCall({
          phoneNumber:this.info.mobile
        })
      },
      handleToUrl(url){  /// 跳转
        uni.navigateTo({
          url
        })
      },
      handleToDoctor(){  //  医师列表
        uni.navigateTo({
          url:'/mainPackage/doctor-list'
        })
      },
      handleToDetail(e){  ///  详情
        uni.navigateTo({
          url:`/mainPackage/goods-detail?id=${e}`
        })
      },
      handleToBrand(){  //  品牌介绍
        uni.navigateTo({
          url:'/mainPackage/brand-intro'
        })
      },
      ///   network
      _getCommentList(value){
        const data = {
          page:1,
          pageSize: 6,
          appId:'yh_mouth_org',
          topicId:this.info.id
        }
        uni.showLoading({
          title:'加载中...'
        })
        this.$get('/social/yahe/comment/pageList',data,'1').then(res=>{
          if(res.code == '1'){
            this.commentList = res.content.list
          }
        })
      }
    }
  }
</script>

<style lang="less">
.shops-detail{
  position: relative;
  padding-bottom: 140rpx;
  .base-back{
    position: fixed;
    left: 20rpx;
    width: 56rpx;
    height: 56rpx;
    z-index: 1;
    top: 50rpx;
    /*#ifdef MP-WEIXIN*/
    top: 100rpx;
    /*#endif*/
  }
  .detail-ad{
    width: 100vw;
    height: 430rpx;
    .item-img{
      width: 100%;
      height: 100%;
    }
  }
  .detail-main{
    margin-top: -20rpx;
    border-radius: 20rpx 20rpx 0 0;
    background: var(--page-bg);
    position: relative;
    overflow: hidden;
    .main-header{
      padding: 22rpx 24rpx;
      background: linear-gradient( 180deg, rgba(16, 190, 175, 0.22) 0%, #fff 130rpx);
      .header-store{
        display: flex;
        border-bottom: 2rpx solid #efefef;
        margin-bottom: 24rpx;
        padding-bottom: 24rpx;
        .store-img{
          width: 112rpx;
          height: 112rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
        .store-info{
          flex: 1;
          h2{
            display: flex;
            align-items: center;
            font-size: 32rpx;
            color: var(--title-color);
            font-weight: bold;
            image{
              width: 36rpx;
              height: 42rpx;
              margin-left: 12rpx;
            }
          }
          .box-flex{
            align-items: center;
            margin: 16rpx 0;
            font-size: 24rpx;
            color: #6D6D6D;
          }
          .info-list{
            display: flex;
            font-size: 24rpx;
            color: #6D6D6D;
            .list-item{
              margin-right: 20rpx;
            }
          }
          .info-tags{
            display: flex;
            margin-top: 16rpx;
            .tags-item{
              line-height: 1;
              background: var(--sub-theme-10);
              color: var(--sub-theme);
              font-size: 20rpx;
              padding: 8rpx;
              margin-right: 8rpx;
              border-radius: 8rpx;
            }
          }
        }
      }  // header-store end
      
      .header-time{
        border-bottom: 2rpx solid #efefef;
        margin-bottom: 24rpx;
        padding-bottom: 24rpx;
        display: flex;
        align-items: center;
        .time-title{
          display: flex;
          align-items: center;
          font-size: 24rpx;
          margin-bottom: 12rpx;
        }
        .time-tags{
          display: flex;
          align-items: center;
          .tags-item{
            line-height: 1;
            background: var(--page-bg);
            color: #6D6D6D;
            font-size: 20rpx;
            padding: 8rpx;
            margin-right: 8rpx;
            border-radius: 8rpx;
          }
        }
        .time-handle{
          margin-left: auto;
          font-size: 20rpx;
          color: var(--title-color);
          text-align: center;
          .img{
            width: 52rpx;
            height: 52rpx;
            display: block;
          }
        }
      }  // header-time end
      
      .header-address{
        .box-flex{
          font-size: 24rpx;
          color: var(--title-color);
          margin-bottom: 12rpx;
          .dot{
            flex: 1;
          }
        }
        .address-p{
          font-size: 22rpx;
          color: var(--sub-title);
          image{
            width: 26rpx;
            height: 26rpx;
            margin-right: 12rpx;
          }
        }
      }
    }  ///  main-header end
    
    
    .main-tabs{
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      .tabs-item{
        font-size: 28rpx;
        color: #6D6D6D;
        position: relative;
        padding: 28rpx 0;
        margin-right: 44rpx;
        white-space: nowrap;
        &::after{
          position: absolute;
          display: block;
          content: '';
          width: 34rpx;
          height: 6rpx;
          background: transparent;
          bottom: 14rpx;
          left: 50%;
          transform: translate(-50%,0);
        }
        &.active{
          font-weight: bold;
          color: var(--theme-color);
        }
        &.active::after{
          background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
        }
      }
    } /// main-tabs end
    
    .main-goods{
      background: #fff;
      .goods-list{
        padding: 0 24rpx;
        .list-item{
          display: flex;
          border-bottom: 2rpx solid #EFEFEF;
          padding: 24rpx 0;
          &:last-child{
            border-bottom: 0;
          }
          .item-img{
            width: 124rpx;
            height: 124rpx;
            margin-right: 24rpx;
            border-radius: 20rpx;
          }
          .item-main{
            flex: 1;
            h2{
              font-size: 26rpx;
              color: var(--title-color);
            }
            .main-p{
              margin: 8rpx 0 16rpx;
              color: #B0B0B0;
              font-size: 20rpx;
            }
            .main-footer{
              display: flex;
              justify-content: space-between;
              .footer-price{
                .price-p{
                  display: flex;
                  align-items: flex-end;
                  font-size: 28rpx;
                  font-weight: bold;
                  color: var(--sub-theme);
                  .discount{
                    background: var(--sub-theme-10);
                    color: var(--sub-theme);
                    line-height: 1;
                    padding: 4rpx;
                    border-radius: 4rpx;
                    font-weight: 400;
                    font-size: 18rpx;
                    margin: 0 8rpx;
                  }
                  .origin{
                    font-weight: 400;
                    font-size: 18rpx;
                    color: #B0B0B0;
                    text-decoration: line-through;
                  }
                }
                .price-span{
                  display: flex;
                  margin-top: 8rpx;
                  .span{
                    background: #fff;
                    color: var(--sub-theme);
                    line-height: 1;
                    border: 2rpx solid var(--sub-theme);
                    padding: 4rpx;
                    border-radius: 4rpx;
                    font-size: 18rpx;
                  }
                }
              }
              .footer-handle{
                text-align: right;
                font-size: 18rpx;
                color:#B0B0B0;
                .button{
                  background: var(--theme-color);
                  color: #fff;
                  font-size: 24rpx;
                  line-height: 1;
                  padding: 12rpx 24rpx;
                  border-radius: 88rpx;
                  margin-top: 4rpx;
                }
              }
            }
          }
        }
      }
    } /// main-goods end
    
    .main-team{
      margin-top: 24rpx;
      background: #fff;
      padding: 0 24rpx 24rpx;
      .team-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 88rpx;
        h2{
          font-size: 28rpx;
          font-weight: bold;
        }
      }
      .team-list{
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        .list-item{
          margin-right: 20rpx;
          padding: 20rpx;
          border-radius: 20rpx;
          background: var(--page-bg);
          display: flex;
          align-items: center;
          .img{
            width: 114rpx;
            height: 114rpx;
            border-radius: 8rpx;
          }
          .item-info{
            flex: 1;
            margin-left: 20rpx;
          }
          .h3{
            font-size: 26rpx;
            color: var(--title-color);
            white-space: nowrap;
            font-weight: bold;
            .span{
              font-size: 20rpx;
              margin-left: 8rpx;
            }
          }
          .item-p{
            font-size: 20rpx;
            margin: 10rpx 0;
            color: var(--title-color);
          }
          .item-footer{
            display: flex;
            align-items: center;
            font-size: 20rpx;
            white-space: nowrap;
            color: #6D6D6D;
            .theme-color{
              margin-left: 8rpx;
            }
          }
        }
      }
    }
    
    .main-brand{
      padding: 0 24rpx;
      background: #fff;
      margin-bottom: 24rpx;
      h2{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        line-height: 88rpx;
        color: var(--title-color);
        font-weight: bold;
      }
      .brand-main{
        padding-bottom: 20rpx;
        border-bottom: 2rpx solid #efefef;
        display: flex;
        align-items: center;
        .img{
          width: 124rpx;
          height: 124rpx;
          margin-right: 24rpx;
          border-radius: 20rpx;
        }
        .main-info{
          flex: 1;
          .info-title{
            font-size: 26rpx;
            color: var(--title-color);
            margin-bottom: 24rpx;
            font-weight: bold;
          }
          .info-list{
            display: flex;
            .list-item{
              display: flex;
              align-items: center;
              font-size: 20rpx;
              color: #6D6D6D;
              margin-right: 24rpx;
            }
          }
        }
      }
      .brand-footer{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24rpx;
        line-height: 88rpx;
        color: var(--title-color);
      }
    }
    
    .main-evaluation{
      padding: 0 24rpx;
      background: #fff;
      .title{
        line-height: 88rpx;
        font-size: 28rpx;
        color: var(--title-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bold;
      }
    }
    
  }  /// detail-main end
  
  
  .detail-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12rpx 24rpx;
    display: flex;
    align-items: center;
    background: #fff;
    .footer-item{
      text-align: center;
      font-size: 20rpx;
      color: var(--title-color);
      margin-right: 48rpx;
      .item-img{
        width: 52rpx;
        height: 52rpx;
        display: block;
      }
    }
    .footer-button{
      flex: 1;
      line-height: 72rpx;
      color: 28rpx;
      background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
      text-align: center;
      border-radius: 72rpx;
      color: #fff;
    }
  }
}
</style>
